<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta id="wxKeywords" name="Keywords" content="星语心愿" />
<meta id="wxDescription" name="Description" content="星语心愿" />
<title>购物车_星语心愿</title>
<!--全局resetCss样式开始-->
<link href="../assets/css/reset.css" rel="stylesheet" type="text/css" />
<!--全局resetCss样式结束-->

<!--订单公用commonCss样式开始-->
<link href="../assets/css/order/common.css" rel="stylesheet" type="text/css" />
<!--订单公用commonCss样式结束-->

<!--公用分页pageCss样式开始-->
<link href="../assets/css/common/page.css" rel="stylesheet" type="text/css" />
<!--公用分页pageCss样式结束-->

<!--页面Css样式开始-->
<link href="../assets/css/order/shopcar.css" rel="stylesheet" type="text/css" />
<!--页面Css样式结束-->

<!--主题themeCss样式开始-->
<link href="../assets/css/theme.css" rel="stylesheet" type="text/css" />
<!--主题themeCss样式结束-->
</head>
<body>
<!--头部开始-->
<div class="header clearfix">
	
    <!--头部工具栏开始-->
    <div class="header_tool">
		<!--头部工具栏主体开始-->
		<div class="tool_main clearfix">

			<!--左侧工具栏开始-->
			<div class="tool_left clearfix">
				<a>您好，欢迎来到星语心愿，请</a>
				<a href="#" class="green login">登录</a>
				<a href="#" class="orange reg">免费注册</a>

				<!--<a href="#" class="green nickname" title="好命先生好命先生">好命先生</a>
				<a>您好，欢迎来到星语心愿</a>
				<a href="#" class="red loginout">[退出登陆]</a>-->
			</div>
			<!--左侧工具栏结束-->

			<!--右侧工具栏开始-->
			<div class="tool_right clearfix" id="tool_right">
				<ul class="clearfix">
					<li class="clearfix">
						<a class="member_info" href="">
							<span class="tool_img tool_headpic"><img src="../assets/images/content/member_01.jpg" alt="" /></span>
							<span class="tool_nickname" title="凌大厨">凌大厨</span>
							<span class="tool_icon"><i class="icon_common icon_down"></i></span>
						</a>
						<!--展开顶级菜单开始-->
						<ul>
							<li>
								<a href="" title="">我的主页</a>
							</li>
							<li>
								<a href="" title="">账号设置</a>
							</li>
							<li>
								<a href="" title="">退出</a>
							</li>
						</ul>
						<!--展开顶级菜单结束-->
					</li>
					<li class="msg_nums clearfix">
						<a href="" title="">
							<span>消息</span>
							<i class="icon_common icon_nums">12</i>
						</a>
					</li>
					<li class="clearfix">
						<a href="" title="">
							<span>我的订单</span>
							<span class="tool_icon"><i class="icon_common icon_down"></i></span>
						</a>
					</li>
					<li class="clearfix">
						<a href="" title="">
							<span>收藏夹</span>
							<span class="tool_icon"><i class="icon_common icon_down"></i></span>
						</a>
					</li>
					<li class="clearfix">
						<a href="" title="">
							<span>服务分类</span>
							<span class="tool_icon"><i class="icon_common icon_down"></i></span>
						</a>
					</li>
					<li class="clearfix">
						<a href="" title="">
							<span>联系客服</span>
							<span class="tool_icon"><i class="icon_common icon_down"></i></span>
						</a>
					</li>
					<li class="clearfix">
						<a href="" title="">
							<span class="tool_icon"><i class="icon_common icon_app"></i></span>
							<span class="orange">APP下载</span>
						</a>
					</li>
				</ul>
			</div>
			<!--右侧工具栏结束-->
		</div>
		<!--头部工具栏主体结束-->
    </div>
    <!--头部工具栏结束-->
    
    <div class="space_hx">&nbsp;</div>
    
    <!--头部中间内容开始-->
    <div class="header_content clearfix">
    	
        <!--头部logo开始-->
        <div class="header_logo">
        	<a href="#" title>
            	<img src="../assets/images/logo.jpg" alt="" />
            </a>
        </div>
        <!--头部logo结束-->
        
        <!--页面提示开始-->
        <div class="header_tip">购物车</div>
        <!--页面提示结束-->
        
        <!--订单流程开始-->
        <div class="header_process clearfix">
        	<!--注意：hover为当前步奏，passed为已完成步骤-->
        	<!--购物车入口开始-->
        	<ul class="shopcar_process clearfix">
        		<li class="hover">
        			<span class="num">1</span>
        			<span class="title">我的购物车</span>
        		</li>
        		<li>
        			<span class="num">2</span>
        			<span class="title">填写核对订单信息</span>
        		</li>
        		<li>
        			<span class="num">3</span>
        			<span class="title">确认支付</span>
        		</li>
        		<li>
        			<span class="num">4</span>
        			<span class="title">支付结果</span>
        		</li>
        	</ul>
        	<!--购物车入口结束-->
        	<!--立即购买入口开始-->
        	<!--<ul class="buy_process clearfix">
        		<li class="hover">
        			<span class="num">1</span>
        			<span class="title">填写核对订单信息</span>
        		</li>
        		<li>
        			<span class="num">2</span>
        			<span class="title">确认支付</span>
        		</li>
        		<li>
        			<span class="num">3</span>
        			<span class="title">支付结果</span>
        		</li>
        	</ul>-->
        	<!--立即购买入口结束-->
        </div>
        <!--订单流程结束-->
    </div>
    <!--头部中间内容结束-->
    
</div>
<!--头部结束-->

<!--身体开始-->
<div class="layer clearfix" id="layer">
	
	<!--购物车工具开始-->
	<div class="shopcar_tool clearfix">
		<div class="shopcar_all">
			全部商品
			<span class="total_num" id="total_num">10</span>
		</div>
		<div class="shopcar_settle">
			<span class="settle_money">
				已选商品总计
				<em>￥</em><em class="total_price">12000.00</em>
			</span>
			<span class="btn submit_ok submit_btn">结算</span>
		</div>
	</div>
	<!--购物车工具结束-->
	
	<!--购物车列表标题开始-->
	<div class="common_form shopcar_title">
		<ul class="clearfix">
			<li class="checkbox">
				<input type="checkbox" name="check_all" class="check_all" checked />
				<span>全选</span>
			</li>
			<li class="product">商品信息</li>
			<li class="price">单价(元)</li>
			<li class="num">数量</li>
			<li class="total">金额(元)</li>
			<li class="deal">操作</li>
		</ul>
	</div>
	<!--购物车列表标题结束-->
		
	<!--购物车列表开始-->
	<div class="shopcar_list">
		
		<!--没有商品的情况开始-->
		<div class="shopcar_list_none" id="shopcar_list_none">
			抱歉，您的购物车暂无任何商品~
		</div>
		<!--没有商品的情况结束-->
		
		<form action="#" method="post" class="cart_form" id="cart_form">
		<!--购物车商品盒子遍历开始-->
		<div class="shopcar_list_box">
			<!--星店信息开始-->
			<div class="shop_info">
				<ul class="clearfix">
					<li class="checkbox">
						<input type="checkbox" name="sid[]" class="check_item check_sid" checked />
					</li>
					<li class="title">
						<a href="" title="">刘友常</a>
					</li>
					<li class="icon">
                    	<i class="icon_order icon_zheng"></i>
                    	<i class="icon_order icon_v_member"></i>
					</li>
				</ul>
			</div>
			<!--星店信息结束-->
			<!--星店服务开始-->
			<div class="common_form shop_service">
				<!--服务列表遍历开始-->
				<ul class="clearfix">
					<li class="checkbox">
						<input type="checkbox" name="pid[]" class="check_item check_pid" price="12000.00" checked />
					</li>
					<li class="product">
						<a href="" title="" class="thumb">
							<img src="../assets/images/content/detail_01.jpg" alt=""  />
						</a>
						<a href="" title="" class="desc">
							<span class="title">和车库咖啡老板苏菂，面对面聊创业！</span>
							<span class="intro">聊聊创业，关于你的项目，或者其他创业者的故事</span>
						</a>
					</li>
					<li class="price">￥12000.00</li>
					<li class="num">x <em>1</em></li>
					<li class="total">￥12000.00</li>
					<li class="deal">
						<span class="delete_this">删除</span>
						<span class="add_collect">加入收藏夹</span>
					</li>
				</ul>
				<!--服务列表遍历结束-->
				<ul class="clearfix">
					<li class="checkbox">
						<input type="checkbox" name="pid[]" class="check_item check_pid" price="12000.00" checked />
					</li>
					<li class="product">
						<a href="" title="" class="thumb">
							<img src="../assets/images/content/detail_01.jpg" alt=""  />
						</a>
						<a href="" title="" class="desc">
							<span class="title">和车库咖啡老板苏菂，面对面聊创业！</span>
							<span class="intro">聊聊创业，关于你的项目，或者其他创业者的故事</span>
						</a>
					</li>
					<li class="price">￥12000.00</li>
					<li class="num">x <em>1</em></li>
					<li class="total">￥12000.00</li>
					<li class="deal">
						<span class="delete_this">删除</span>
						<span class="add_collect">加入收藏夹</span>
					</li>
				</ul>
			</div>
			<!--星店信息结束-->
		</div>
		<!--购物车商品盒子遍历结束-->
		<!--购物车商品盒子遍历开始-->
		<div class="shopcar_list_box">
			<!--星店信息开始-->
			<div class="shop_info">
				<ul class="clearfix">
					<li class="checkbox">
						<input type="checkbox" name="sid[]" class="check_item check_sid" checked />
					</li>
					<li class="title">
						<a href="" title="">刘友常</a>
					</li>
					<li class="icon">
                    	<i class="icon_order icon_zheng"></i>
                    	<i class="icon_order icon_v_member"></i>
					</li>
				</ul>
			</div>
			<!--星店信息结束-->
			<!--星店服务开始-->
			<div class="common_form shop_service">
				<!--服务列表遍历开始-->
				<ul class="clearfix">
					<li class="checkbox">
						<input type="checkbox" name="pid[]" class="check_item check_pid" price="12000.00" checked />
					</li>
					<li class="product">
						<a href="" title="" class="thumb">
							<img src="../assets/images/content/detail_01.jpg" alt=""  />
						</a>
						<a href="" title="" class="desc">
							<span class="title">和车库咖啡老板苏菂，面对面聊创业！</span>
							<span class="intro">聊聊创业，关于你的项目，或者其他创业者的故事</span>
						</a>
					</li>
					<li class="price">￥12000.00</li>
					<li class="num">x <em>1</em></li>
					<li class="total">￥12000.00</li>
					<li class="deal">
						<span class="delete_this">删除</span>
						<span class="add_collect">加入收藏夹</span>
					</li>
				</ul>
				<!--服务列表遍历结束-->
				</ul>
			</div>
			<!--星店信息结束-->
		</div>
		<!--购物车商品盒子遍历结束-->
		</form>
		
		<!--分页结构开始-->
		<div class="web_page clearfix" id="web_page">
			<ul>
				<li class="link prev">
					<a href="" title=""><em><</em> 上一页</a>
				</li>
				<li class="link current"><!--当前页样式current-->
					<a href="" title="">1</a>
				</li>
				<li class="link">
					<a href="" title="">2</a>
				</li>
				<li class="link">
					<a href="" title="">3</a>
				</li>
				<li class="link">
					<a href="" title="">4</a>
				</li>
				<li class="link">
					<a href="" title="">5</a>
				</li>
				<li class="link">
					<a href="" title="">6</a>
				</li>
				<li class="more">
					...
				</li>
				<li class="link next">
					<a href="" title="">下一页 <em>></em></a>
				</li>
				<li class="total">
					共<em>50</em>页
				</li>
				<li class="jump">
					到第<input type="text" value="1" name="pagenum" />页
					<span class="submit_page">确定</span>
				</li>
			</ul>
		</div>
		<!--分页结构结束-->
		
	</div>
	<!--购物车列表结束-->
	
	<!--购物车工具开始-->
	<div class="shopcar_tool shopcar_bottom clearfix">
		<div class="shopcar_all">
			<input type="checkbox" name="check_all" class="check_all" checked="" />
			<span>全选</span>
			<span class="delete_this" more='yes'>删除</span>
			<span class="add_collect" more='yes'>加入收藏夹</span>
		</div>
		<div class="shopcar_settle">
			<span class="settle_money">
				合计（不含运费、手续费、税等费用）：
				<em>￥</em><em class="total_price" id="total_price">12000.00</em>
			</span>
			<span class="btn submit_ok submit_btn">结算</span>
		</div>
	</div>
	<!--购物车工具结束-->
	
</div>
<!--身体结束-->

<!--底部开始-->
<div class="footer clearfix">
	
	<!--提供的服务、保障开始-->
    <div class="service footer_service">
    	<ul class="clearfix">
        	<li>
        		<i class="icon_common icon_five5"></i>
                <span>五大服务保障</span>
            </li>
            <li>
        		<i class="icon_common icon_smrz"></i>
                <span>实名认证</span>
            </li>
            <li>
        		<i class="icon_common icon_zzrz"></i>
                <span>资质认证</span>
            </li>
            <li>
        		<i class="icon_common icon_zfaq"></i>
                <span>支付安全</span>
            </li>
            <li>
        		<i class="icon_common icon_zyfw"></i>
                <span>专业服务</span>
            </li>
            <li>
        		<i class="icon_common icon_shwy"></i>
                <span>售后无忧</span>
            </li>
        </ul>
    </div>
	<!--提供的服务、保障结束-->
		
	<!--底部主体开始-->
    <div class="footer_main clearfix">
        
        <!--底部快捷导航开始-->
        <div class="footer_link clearfix">
        	<dl>
            	<dt>
                	新手指南
                </dt>
                <dd>
                	<a href="">注册登录</a>
                </dd>
                <dd>
                	<a href="">完善资料</a>
                </dd>
                <dd>
                	<a href="">购买流程</a>
                </dd>
                <dd>
                	<a href="">会员介绍</a>
                </dd>
                <dd>
                	<a href="">常见问题</a>
                </dd>
            </dl>
            <dl>
            	<dt>
                	支付方式
                </dt>
                <dd>
                	<a href="">在线支付</a>
                </dd>
                <dd>
                	<a href="">星币支付</a>
                </dd>
                <dd>
                	<a href="">转账汇款</a>
                </dd>
            </dl>
            <dl>
            	<dt>
                	安全保障
                </dt>
                <dd>
                	<a href="">实名认证</a>
                </dd>
                <dd>
                	<a href="">资质认证</a>
                </dd>
                <dd>
                	<a href="">支付安全</a>
                </dd>
                <dd>
                	<a href="">专业服务</a>
                </dd>
                <dd>
                	<a href="">售后无忧</a>
                </dd>
            </dl>
            <dl>
            	<dt>
                	售后服务
                </dt>
                <dd>
                	<a href="">发票相关</a>
                </dd>
                <dd>
                	<a href="">退款说明</a>
                </dd>
                <dd>
                	<a href="">忘记密码</a>
                </dd>
                <dd>
                	<a href="">意见反馈</a>
                </dd>
            </dl>
            <dl>
            	<dt>
                	联系我们
                </dt>
                <dd>
                	<a href="">新浪微博</a>
                </dd>
                <dd>
                	<a href="">官方微信</a>
                </dd>
                <dd>
                	<a href="">关于我们</a>
                </dd>
                <dd>
                	<a href="">联系我们</a>
                </dd>
            </dl>
        </div>    
        <!--底部快捷导航结束-->
        
        <!--底部二维码导航开始-->
        <div class="footer_code">
        	<img src="../assets/images/code.jpg" alt="" />
            <p>微信二维码</p>
        </div>  
        <!--底部二维码导航结束-->
        
        <!--底部联系方式开始-->
        <div class="footer_tel">
        	<p class="title">咨询电话</p>
            <p class="number">400-666-6789</p>
            <p>E-mail：400000@qq.com</p>
            <p>QQ：4000 000</p>
        </div>
        <!--底部联系方式结束-->
        
    </div>
	<!--底部主体结束-->
    
    <div class="space_hx">&nbsp;</div>
    
    <!--底部版权信息开始-->
    <div class="footer_copyright">
    	© 2015 长沙星语心愿信息技术有限公司 版权所有   湘ICP备10000087号
    </div>
    <!--底部版权信息结束-->

</div>
<!--底部结束-->

<!--身体右边公用侧边栏开始-->
<div class="body_fixed_nav" id="body_fixed_nav">
	<a href="" title="" class="clearfix">
		<span class="icon"><i class="icon_common icon_msg"></i></span>
		<span class="word">在线留言</span>
	</a>
	<a href="" title="" class="clearfix">
		<span class="icon"><i class="icon_common icon_love"></i></span>
		<span class="word">我的最爱</span>
	</a>
	<a href="" title="" class="clearfix">
		<span class="icon"><i class="icon_common icon_history"></i></span>
		<span class="word">浏览历史</span>
	</a>
	<a href="" title="" class="clearfix">
		<span class="icon"><i class="icon_common icon_collect"></i></span>
		<span class="word">我的收藏</span>				
	</a>
	<a href="javascript:;" title="" id="nav_back_top" class="clearfix">
		<span class="icon"><i class="icon_common icon_backtop"></i></span>
		<span class="word">回到顶部</span>
	</a>
</div>
<!--身体右边公用侧边栏结束-->

<!--Jquery库开始-->
<script type="text/javascript" src="../assets/js/lib/jquery-1.8.3.min.js"></script>
<!--Jquery库结束-->
<!--公用cmmonJS开始-->
<script type="text/javascript" src="../assets/js/common/common.js"></script>
<!--公用cmmonJS结束-->
<!--弹出层插件layer开始-->
<script type="text/javascript" src="../assets/plugins/layer/layer.js"></script>
<!--弹出层插件layer结束-->
<script type="text/javascript">
$(function(){
	var layerId = '#layer ';//全局身体变量layer
	calcTotal(layerId);//初始化计算总价、总量
	
	//全选所有星店商品
	$(layerId+'.check_all').on('click',function(){
		var checkAll = $(layerId+'.check_all');
		if($(this).prop('checked')){
			$('.check_item').prop('checked',true);
			checkAll.prop('checked',true);
		}else{
			$('.check_item').prop('checked',false);
			checkAll.prop('checked',false);
		}
		calcTotal(layerId);
	});
	
	//全选单个星店的商品
	$(layerId+'.check_sid').on('click',function(){
		var checkPid  = $(this).parents('.shop_info').siblings('.shop_service').find('.check_pid');
		var checkPids = $(this).parents('.shopcar_list_box').siblings().find('.check_pid');
		if($(this).prop('checked')){
			checkPid.prop('checked',true);
		}else{
			checkPid.prop('checked',false);
		}
		checkAllStatus(layerId,checkPid,checkPids);
		calcTotal(layerId);
	});
	
	//单选星店中的某个商品
	$(layerId+'.check_pid').each(function(){
		var thisPid   = $(this);
		var otherPid  = thisPid.parents('ul').siblings('ul').find('.check_pid');
		var checkSid  = thisPid.parents('.shop_service').siblings('.shop_info').find('.check_sid');
		var checkSids = thisPid.parents('.shopcar_list_box').siblings().find('.check_sid');
		$(this).on('click',function(){
			//星店中商品全选中，则星店选中
			if(thisPid.prop('checked') == true && (otherPid.prop('checked') == true || otherPid.prop('checked') == undefined)){
				checkSid.prop('checked',true);
			}else{
				checkSid.prop('checked',false);
			};
			checkAllStatus(layerId,checkSid,checkSids);
			calcTotal(layerId);
		});
	});
	
	//点击删除商品
	$(layerId+'.delete_this').on('click',function(){
		var obj = $(this);
		var deleteMore = obj.attr('more');
		layer.confirm('确认删除所选商品？', {
		    btn  :['确认','再考虑下'], //按钮
			title:'温馨提示',
			icon :0
		},function(){
		    layer.msg('删除成功！',{icon:1,time:1000},function(){
				if(deleteMore){
					//删除多个商品
					$(layerId+'.check_pid').each(function(){
						if($(this).prop('checked')){
							$(this).parents('ul').remove();
						}
					});
				}else{
					//单个删除商品
					obj.parents('ul').remove();
				}
				calcTotal(layerId,'delete')
		    });
		},function(){
		    layer.msg('多谢手下留情！',{icon:6,time:1000});
		});
	});
	
	//点击加入收藏夹
	$(layerId+'.add_collect').on('click',function(){
		layer.confirm('确认加入收藏夹？', {
		   	btn  :['确认','再考虑下'], //按钮
			title:'温馨提示',
			icon :0
		},function(){
		    layer.msg('加入收藏夹成功！',{icon:1,time:1000});
		},function(){
		    layer.msg('加入收藏夹失败！',{icon:2,time:1000});
		});
	});
	
	//提交表单
	$(layerId+'.submit_ok').on('click',function(){
		if($(this).hasClass('submit_ok')){
			$('#cart_form').submit();
		}else{
			layer.alert('请先选择至少一件商品！',{icon:0})
		}
	});
});

//全选状态筛选
function checkAllStatus(layerId,obj,objSiblings){
	var checkAll  = $(layerId+'.check_all');
	if(obj.prop('checked') == true && objSiblings.prop('checked') == true){
		checkAll.prop('checked',true);
	}else{
		checkAll.prop('checked',false);
	}
}
	
//计算商品总价格
function calcTotal(layerId,isDelete){
	var price      = 0;
	var total      = 0;
	var totalNum   = $('#total_num');
	var totalPrice = $(layerId+'.total_price');
	var checkItem  = $(layerId+'.check_item');
	var listNone   = $('#shopcar_list_none');
	checkItem.each(function(){
		var obj = $(this);		
		if(obj.prop('checked')){
			if(obj.attr('price')){
				var num = obj.parent('.checkbox').siblings('.num').find('em').text();
				price += parseFloat(obj.attr('price'))*parseInt(num);
				total += 1
			}
		}
	});
	//商品总价格
	totalPrice.text(price.toFixed(2));
	if(price > 0 ){
		submitBtn(layerId,true);
	}else{
		submitBtn(layerId,false);
	}
	//商品总数量
	totalNum.text(parseInt(total));
	if(total==0 && isDelete){
		listNone.show().siblings().hide();
	}
}

//设置确定按钮样式
function submitBtn(layerId,flag){
	if(flag){
		$(layerId+'.submit_btn').removeClass('submit_no').addClass('submit_ok');
	}else{
		$(layerId+'.submit_btn').addClass('submit_no').removeClass('submit_ok');
	}
}
</script>
</body>
</html>
